<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" />
    <script type="text/javascript" src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "Microsoft YaHei"
        }

        #map, #info {
            width: 60%;
            height: 60%;
        }
    </style>
</head>
<body>
<div id="btn">
    <button id="btnclick" onclick="clickHandler()">框选范围</button>
</div>
<div id="map"></div>
<div id="info">
    <table>
        <tr>
            <td>框选范围:</td>
            <td>左上角坐标:</td>
            <td>经度：<input id="zjd" readonly=“readonly”/></td>
            <td></td>
            <td>右下角坐标:</td>
            <td>经度：<input id="yjd" readonly=“readonly”/></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>纬度：<input id="zwd" readonly=“readonly”/></td>
            <td></td>
            <td></td>
            <td>纬度：<input id="ywd" readonly=“readonly”/></td>
        </tr>
    </table>

</div>

<script>
    var style = new ol.style.Style({
        fill: new ol.style.Fill({
            color: 'rgba(96,96,96, 0.1)'
        }),
        //划线的时候的图样
        stroke: new ol.style.Stroke({
            color: 'red',
            width: 2
        }),
        image: new ol.style.Circle({
            radius: 5,
            stroke: new ol.style.Stroke({
                color: 'rgba(96,96,96, 0.1)'
            }),
            fill: new ol.style.Fill({
                color: 'rgba(96,96,96, 0.1)'
            })
        })
    });
    var map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.transform([120.15, 30.28], 'EPSG:4326', 'EPSG:3857'),
            zoom: 9
        })
    });
    var layer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: style
    });
    var draw = new ol.interaction.Draw({
        source: layer.getSource(),
        type: 'Circle',
        style: style,
        geometryFunction: ol.interaction.Draw.createBox()
    });

    var yjd=  document.getElementById('yjd')
    var ywd=  document.getElementById('ywd')
    var zjd=  document.getElementById('zjd')
    var zwd=  document.getElementById('zwd')
    var btn=  document.getElementById('btnclick')


    function clickHandler(e1) {
        if ("取消框选" == (btn.innerText)) {
            btn.innerText = "框选范围"
            yjd.setAttribute("value", '')
            zjd.setAttribute("value", '')
            ywd.setAttribute("value", '')
            zwd.setAttribute("value", '')
            layer.getSource().clear();
            map.removeLayer(layer);
        } else {
            btn.innerText = '取消框选'
            map.addInteraction(draw);
        }
    }

    draw.on('drawend', function (evt) {
        var extent = evt.feature.getGeometry().getExtent()
        yjd.setAttribute("value", ol.proj.transform([extent[0],extent[3]], 'EPSG:3857', 'EPSG:4326')[0].toFixed(2))
        ywd.setAttribute("value", ol.proj.transform([extent[0],extent[3]], 'EPSG:3857', 'EPSG:4326')[1].toFixed(2))
        zjd.setAttribute("value", ol.proj.transform([extent[2],extent[1]], 'EPSG:3857', 'EPSG:4326')[0].toFixed(2))
        zwd.setAttribute("value", ol.proj.transform([extent[2],extent[1]], 'EPSG:3857', 'EPSG:4326')[1].toFixed(2))
        map.addLayer(layer);
        map.removeInteraction(draw);
    });
</script>

</body>
</html>